<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS - 单位</title>
    <style>
      body {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }

      fieldset {
        margin-bottom: 12px;
      }
      .px {
        font-size: 14px;
        width: 200px;
        height: 60px;
        border: 1px solid #ccc;
      }
      .box {
        padding: 20px;
        border-radius: 8px;
        background-color: #e8f4fc;
        width: 500px;
      }
      .box .sub-box {
        width: 80%;
        padding: 5%;
        background-color: aquamarine;
      }
      .box.em-box {
        font-size: 1.2em;
        padding: 1.5em;
      }
      .box.rem-box {
        font-size: 1.2rem;
        padding: 1.5rem;
      }
      .box.viewport-box {
        width: 10vw;
        height: 10vh;
      }
    </style>
  </head>
  <body>
    <fieldset>
      <legend>像素px的使用</legend>
      <div class="px">像素(px)：展示了固定尺寸的元素，不随屏幕大小变化</div>
    </fieldset>
    <fieldset>
      <legend>百分比 (%)的使用</legend>
      <div class="example">
        <div class="box">
          <div class="sub-box">
            <p>百分比(%)：展示了相对于父元素宽度的百分比布局</p>
            这个容器的宽度是其父元素的80%，内边距是自身宽度的5%。
          </div>
        </div>
      </div>
    </fieldset>
    <fieldset>
      <legend>em单位的使用</legend>
      <div class="example">
        <div class="box em-box">
          基于em单位的尺寸，这个容器的内边距(1.5em)是基于它的字体大小(1.2em)计算的。浏览器预设字体大小为16px，若无特别指定则会直接继承父元素字体大小，那么：.em-box的字体大小就是相对当前字体大小16
          * 1.2 = 19.2px, 1.5em =1.5 * 19.2=28.8px
          <br />
          <p>
            p(会继承父元素.em-box的字体大小1.2em样式)的字体大小是相对当前字体大小19.2
            * 1.2 = 16*1.2*1.2 = 23.04px
          </p>
        </div>
      </div>
    </fieldset>
    <fieldset>
      <legend>rem单位的使用</legend>
      <div class="example" style="font-size: 18px">
        <div class="box rem-box">
          这个容器的大小是基于根元素的字体大小(通常是16px)计算的。如果根字体大小是16px，那么：1.2rem
          = 19.2px, 1.5rem = 24px
          <p>p的字体大小也是19.2px</p>
        </div>
      </div>
    </fieldset>
    <fieldset>
      <legend>vw/vh单位的使用</legend>
      <div class="example">
        <div class="box viewport-box">
          尝试调整浏览器窗口大小，观察这个容器的变化。
        </div>
      </div>
    </fieldset>
    <fieldset>
      <legend>ch单位的使用</legend>
      <div class="example">
        <div style="width: 5ch; overflow: hidden">012345678910</div>
      </div>
    </fieldset>
  </body>
</html>
